<template>
  <div>
    <vue-preview :slides="slide1" @close="handleClose"></vue-preview>

    <ul>
      <li>
        <router-link :to="{name:'vueStore'}">vueStore</router-link>
      </li>
      <li>
        <router-link :to="{name:'watch'}">watch</router-link>
      </li>
    </ul>


      <router-view></router-view>
      <router-view name="watch"></router-view>

  </div>
</template>

<script>
  export default {
    name: "home",
    data(){
      return {
        slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }
        ],

      }
    },
    methods:{
      handleClose () {
        console.log('close event')
      }
    },
    watch:{
      '$route' (to, from){
        console.log(to);
        console.log(from);
      }
    }

  }
</script>

<style scoped lang="less">
  .red{
    width: 200px;
    height: 200px;
    background: red;
  }
  .p{
    font-size: 30px;
    margin: 50px auto;
  }

</style>
